<template>
  <div id="flightListBackPage">
  	<!--第一程信息-->
  	<div class="firstRoute">
			<div>
				<div>
					<span class="iconfont">&#xe608;</span>
					<span>{{flight.inland[0].segments[0].fromDate|date}}</span>
					<span>{{flight.inland[0].segments[0].fromDate|week}}</span>
					<span>{{flight.inland[0].segments[0].fromDate|time}}-{{flight.inland[0].segments[flight.inland[0].segments.length-1].toDate|time}}</span>
					<span>{{flight.inland[0].segments[0].flightNo}}</span>
				</div>
				<div @click="reChoose">
					<span class="iconfont">&#xe600;</span>
				</div>
			</div>
		</div>
		<!--重新选择日期组件-->
		<DatePanel @reload="load" :type="'arr'"></DatePanel>
		<!--shopping加载动画组件-->
		<Loading v-show="loading"></Loading>	
		<!--搜索结果为空组件-->
  	<noShopping	v-if="noShopping"></noShopping>
  	<!--请求失败组件-->
  	<netError v-if="netError" @close="netErrorClose"></netError>
		<div v-show="!loading" class="list">			
			<ul>
				<li v-for="flight in flightData" @click="selectTheFlight(flight)">
					<div class="flightTop">
						<div class="topLeft">
							<div>
								<div class="time">{{flight.segments[0].fromDate|time}}</div>
								<div class="airport">
									<p>{{flight.segments[0].fromAirportCn}}</p>
									<p>{{flight.segments[0].fromTower}}</p>									
								</div>
							</div>
							<div class="midmess">
								<div v-if="directFlight(flight).show">
									<p class="type" :class="{'twoTran':directFlight(flight).color}">转</p>
									<p class="tranformCity" :class="{'twoTran':directFlight(flight).color}">{{directFlight(flight).city}}</p>
								</div>
								<div v-if="stopOver(flight).show">
									<p class="type" :class="{'twoTran':stopOver(flight).color}">经停</p>
									<p class="stopoverCity" :class="{'twoTran':stopOver(flight).color}">{{stopOver(flight).city}}</p>
								</div>					
							</div>
							<div>
								<div class="time">{{arrivedMess(flight).toDate|time}} <span v-if="acrossDay(flight)" class="acrossDay">+{{acrossDay(flight)}}</span></div>
								<div class="airport">
									<p>{{arrivedMess(flight).toAirportCn}}</p>
									<p>{{arrivedMess(flight).toTower}}</p>									
								</div>
							</div>
						</div>
						<div class="money">
							<div>￥ <span class="count">{{flight.minAdultFacePrice}}</span></div>
							<!--航司直销-->
							<div v-if="flight.prices[0].supplierId=='JHAD'">
								<span class="directSelling">航司直销</span>
							</div>
							<!--活动-->
							<div v-if="(flight.activity&&flight.activity.actContent)" class="dis">
								<div class="discount">{{flight.activity.actContent|actContent}}</div>
								<div class="discountCount">￥{{flight.activity.actMoney}}</div>
							</div>
						</div>
					</div>
					<div class="flightBottom">
						<span class="sign">
							<img :src="'/static/airlines/' + imgName(flight)">
						</span>						
						<span>{{flight.segments[0].flightNo}} <span v-if="flight.segments[0].shareFlightNo" class="share">共享</span> | 机型{{flight.segments[0].planeModel}} </span>						
						<p class="shijian">
							<span class="iconfont">&#xe68e;</span>
							<span>
								<span>总 {{flightDuration(flight.segments)|duration}} </span>
								<span v-if="directFlight(flight).show">| 转  {{tranformTime(flight)|duration}}</span>
								<span v-if="stopOver(flight).show">| 停  {{flight.segments[0].stopOver[0].stopTime}}</span>
							</span>
						</p>
					</div>
				</li>
			</ul>			
		</div>
		<div class="footer">
			<!--<div @click="screen">
				<div><span class="iconfont">&#xe689;</span></div>
				<div><mu-flat-button label="筛选" class="filterType"/></div>
			</div>-->
			<div @click="filterAsTime">
				<div v-show="!orderByActive.time"><span class="iconfont">&#xe68e;</span></div>
				<div v-show="orderByActive.time"><span class="iconfont">&#xe6da;</span></div>
				<div><mu-flat-button :label="orderByText.time" class="filterType"/></div>
			</div>
			<div @click="filterAsPrice">
				<div v-show="!orderByActive.price"><span class="iconfont">&#xe679;</span></div>
				<div v-show="orderByActive.price"><span class="iconfont">&#xe60b;</span></div>
				<div><mu-flat-button :label="orderByText.price" class="filterType"/></div>
			</div>
		</div> 	
  </div> 
</template>

<script>
	import main from './main';
	export default {	
		...main
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>
